<template>
  <!-- accordion  表示只能开启一个面板 -->
  <el-collapse v-model="activeName" accordion>
    <el-collapse-item
      v-for="item in features"
      :key="item.id"
      :title="item.title"
      :name="item.id"
    >
      <div v-html="item.content"></div>
    </el-collapse-item>
  </el-collapse>
</template>

<script setup >
import { defineProps, ref } from "vue";
defineProps({
  features: {
    type: Array,
    required: true,
  },
});

const activeName = ref(0);
</script>

<style lang="scss" scoped>
::v-deep .el-collapse-item__header {
  font-weight: bold;
}
::v-deep .el-collapse-item__content {
    a {
      color: #2d62f7 !important;
      margin: 0 4px;
    }
}
</style>